import React,{useState,useEffect} from 'react'
import { connect } from 'react-redux'
import { InputItem,Toast,Switch,List,Button } from 'antd-mobile'
// import { createForm } from 'rc-form';

import Navbar from '../../components/Navbar'

import { BASEURL,reqUpdateUserData,reqUserData } from '../../api'
import { setUserData } from '../../redux/actions'
import { user_action } from '../../utils'

import './index.scss'

export default connect(state=>({user:state.user}),{setUserData})(function Personal(props) {

  const {user}=props

  const [submitData,setSubmitData]=useState({
    avatar:{data:user.avatar,isPass:false,error:''},
    nickname:{data:user.nickname,isPass:false,error:''},
    email:{data:user.email?user.email:'admin@qq.com',isPass:false,error:''},
    phone:{data:user.phone,isPass:false,error:''},
    gender:{data:user.gender,isPass:false,error:''},
    goUpdate:false
  })

  const renderArr=[
    {name:'nickname',label:'昵称',value:user.nickname},
    {name:'email',label:'邮箱',value:user.email?user.email:'admin@qq.com'},
    {name:'phone',label:'手机号',type:'phone',value:user.phone},
    {name:'gender',label:'性别',disabled:true,value:user.gender},
  ]

  useEffect(()=>{
    const {setUserData}=props
    async function modifyUserData(params){
      Toast.loading('Loading...',0)
      
      let res=await reqUpdateUserData(params)
      let data_res=await reqUserData()
      setUserData(data_res.body)
      user_action.set(data_res.body)
      Toast.success(res.description)
      setSubmitData({...submitData,goUpdate:false})
    }
    function getSubmitData(){
      const {gender,phone,nickname}=submitData//avatar
      return {
        // avatar:gender.data,
        gender:gender.data,
        nickname:nickname.data,
        phone:phone.data
      }
    }
    if(submitData.goUpdate)modifyUserData(getSubmitData())
  },[submitData,props])

  return (
    <div>
      <div className='personal-navbar'>
        <Navbar title='个人资料'></Navbar>
      </div>
      <div className='personal-content'>
        <div className='personal-card'>
          <div className='avatar'>
            <img src={BASEURL+"/img/avatar.png"} alt="" />
          </div>
          <div className='message'>
            <div className='title'>User Profile</div>
            <List>
            {
              renderArr.map(i=><InputItem
                key={i.name}
                clear
                name={i.name}
                placeholder={i.disabled?'':"请输入"+i.label}
                onChange={val=>setSubmitData({...submitData,[i.name]:{...submitData[i.name],data:val}})}
                disabled={i.disabled}
                value={i.name==='gender'?(submitData[i.name].data==='1'?'男':'女'):submitData[i.name].data}
                // error={!submitData[i.name].isPass}
                // onErrorClick={()=>Toast.show(submitData[i.name].error)}
              >{[i.label]}:
              {
                  i.name==='gender'?<div className='switch'>
                    <Switch
                      platform="ios"
                      color="#2caf87"
                      checked={submitData['gender'].data==='1'}
                      onChange={val=>setSubmitData({...submitData,gender:{...submitData['gender'],data:val?'1':'0'}})}
                    />
                  </div>:null
                }
              </InputItem>)
            }
            </List>
            <div className='personal-submit-btn'>
              <Button type='primary' onClick={()=>setSubmitData({...submitData,goUpdate:true})}>提交</Button>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>
  )
})
